<template>
  <el-drawer
    custom-class="change-log-page "
    :with-header="false"
    :size="800"
    :visible.sync="selfVisible"
    @close="onHide">
    <el-scrollbar class="scroll">
      <chagnelog class="markdown-body chagnelog"></chagnelog>
    </el-scrollbar>
  </el-drawer>
</template>

<script>
import chagnelog from '../../CHANGELOG.md'
import 'github-markdown-css'
export default {
  name: 'ChangeLogPage',
  components: { chagnelog },
  props: {
    visible: {
      type: Boolean,
    },
  },
  data() {
    return {
      selfVisible: false,
    }
  },
  computed: {},
  watch: {
    visible(visible) {
      this.selfVisible = visible
    },
  },
  created() {},
  mounted() {},
  methods: {
    onHide() {
      this.$emit('update:visible', false)
      this.$emit('closed')
    },
  },
}
</script>
<style lang="scss" scoped>
.change-log-page {
  height: 100%;
  .scroll {
    height: 100%;
  }
  .chagnelog {
    padding: 10px 20px;
    background: rgba($color: #fff, $alpha: 0.9);
    text-align: left;
  }
}
</style>
